<template>
    <div>
        <div style="display: flex;justify-content: flex-end;">
            <!-- 搜索 -->
            <div style="display: flex;">
                <el-input v-model.trim="userId" placeholder="请输入用户Id"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch(userId)">搜索</el-button>
            </div>
        </div>

        <!-- 列表信息 -->
        <el-table :data="showList" style="width: 100%;margin-top: 20px;" fit border>
            <el-table-column label="用户Id" width="180" align="center">
                <template #default="scope">
                    <span style="margin-left: 10px">{{ scope.row.userid }}</span>
                </template>
            </el-table-column>
            <el-table-column label="图片" width="250" align="center">
                <template #default="scope">
                    <div slot="reference" class="name-wrapper">
                        <img v-show="scope.row.image != ''" :src="scope.row.image" class="img" alt="图片信息错误" />
                        <p v-show="scope.row.image == ''">未上传图片</p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="内容" width="400">
                <template #default="scope">
                    <span style="margin-left: 10px">{{ scope.row.content ? scope.row.content : '信息未上传' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="发布时间" width="180">
                <template #default="scope">
                    <span style="margin-left: 10px">{{ scope.row.time }}</span>
                </template>
            </el-table-column>
            <el-table-column label="审核状态" width="180" align="center">
                <template #default="scope">
                    <span v-show="scope.row.state == '未审核'" style="margin-left: 10px;">{{ scope.row.state }}</span>
                    <span v-show="scope.row.state == '审核失败'" style="margin-left: 10px;color: red;">{{ scope.row.state
                    }}</span>
                    <span v-show="scope.row.state == '审核通过'" style="margin-left: 10px;color: green;">{{ scope.row.state
                    }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="300" align="center">
                <template #default="scope">
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
                        删除
                    </el-button>
                    <el-button size="mini" type="success" @click="handleSuccess(scope.$index, scope.row)">
                        审核通过
                    </el-button>
                    <el-button size="mini" type="danger" @click="handlePass(scope.$index, scope.row)">
                        审核不通过
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block">
            <el-pagination layout="prev, pager, next" :total=totalElements :page-size="pageSize" @current-change="onChange">
            </el-pagination>
        </div>

    </div>
</template>
      
<script>
export default {
    data() {
        return {
            totalElements: 0,//总条数
            pathList: [],//总列表
            showList: [],//分页显示列表
            pageSize: 10,//每页条数
            id: '',
            image: '',
            userid: '',//用户Id
            content: '',//攻略内容
            time: '',//发布时间
            state: '',//审核状态
            userId: '',//搜索框的输入内容
        }
    },
    methods: {
        //搜索
        async handleSearch(userId) {
            this.userId = userId
            await this.$http.post("/seltravel", { userid: userId }).then(res => {
                if (res.code == 200) {
                    let result = res.data;
                    for (let i in result) {
                        if (result[i].state == '1') {
                            result[i].state = '审核通过'
                        } else if (result[i].state == '0') {
                            result[i].state = '未审核'
                        } else if (result[i].state == '-1') {
                            result[i].state = '审核失败'
                        }
                    }
                    this.pathList = result;
                    this.totalElements = this.pathList.length;
                    if (this.totalElements <= this.pageSize) {
                        this.showList = this.pathList
                    } else {
                        this.showList = this.pathList.slice(0, this.pageSize)
                    }
                } else {
                    this.$message.error(res.status)
                }
            })
        },
        //删除
        async handleDelete(index, row) {
            let id = row.id;
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$http.post("/deltravel", { id: id }).then(res => {
                    if (res.code == 200) {
                        this.pathList.splice(index, 1);
                        this.$message.success(res.status)
                        if (this.userId) {
                            this.handleSearch(this.userId)
                        } else {
                            this.getList()
                        }
                    }
                })
            }).catch(() => {
                this.$message.info('已取消删除')
            });
        },
        //审核通过
        async handleSuccess(index, row) {
            let id = row.id;
            let state = row.state
            if (state !== '审核通过') {
                state = '1'
            }
            await this.$http.post("/suctravel", { id: id, state: state }).then(res => {
                if (res.code == 200) {
                    this.$message.success(res.status)
                    if (this.userId) {
                        this.handleSearch(this.userId)
                    } else {
                        this.getList()
                    }
                }
            })
        },
        //审核不通过
        async handlePass(index, row) {
            let id = row.id;
            let state = row.state
            if (state !== '审核失败') {
                state = '-1'
            }
            await this.$http.post("/passtravel", { id: id, state: state }).then(res => {
                if (res.code == 200) {
                    this.$message.warning(res.status)
                    if (this.userId) {
                        this.handleSearch(this.userId)
                    } else {
                        this.getList()
                    }
                }
            })
        },
        //分页
        onChange(pageNumber) {
            this.showList = [];
            if (this.totalElements < pageNumber * this.pageSize) {
                this.showList = this.pathList.slice(this.pageSize * (pageNumber - 1))
            } else {
                this.showList = this.pathList.slice(this.pageSize * (pageNumber - 1), this.pageSize * pageNumber)
            }
        },
        //获取列表数据
        async getList() {
            await this.$http.get("/gettravel").then(res => {
                console.log(res.data)
                let result = res.data;
                //修改审核状态
                for (let i in result) {
                    if (result[i].state == '1') {
                        result[i].state = '审核通过'
                    } else if (result[i].state == '0') {
                        result[i].state = '未审核'
                    } else if (result[i].state == '-1') {
                        result[i].state = '审核失败'
                    }
                }
                this.pathList = result;
                this.totalElements = this.pathList.length;
                if (this.totalElements <= this.pageSize) {
                    this.showList = this.pathList
                } else {
                    this.showList = this.pathList.slice(0, this.pageSize)
                }
            })
        },
    },

    mounted() {
        this.getList();
    },
}
</script>
    
<style>
.img {
    width: 180px;
}
</style>